<template>
    <section class="container">
        <header class="site-header">
            <header-animate></header-animate>
            <v-img class="site-logo" src="logo"></v-img>
        </header>
        <main class="site-main">
            <block v-for="(item,index) of 10" :key="index"></block>
            <footer class="container-footer">
                「剑的传说，仍在继续」
            </footer>
        </main>
    </section>
</template>

<script>
    import HeaderAnimate from '../components/logic/HeaderAnimate.vue';
    import Block from '../components/logic/Block.vue'

    export default {
        name:'home',
        components:{
            HeaderAnimate,
            Block
        }
    }
</script>

<style scoped>
    .site-header {
        text-align: center;
        font-size:2rem;
    }

    .site-logo {
        margin-top:1em;
        height:110px;
    }

    .site-main {
        margin-top:3em;
        padding-bottom:15em;
    }

    .container-footer {
        padding-top:15px;
        text-align:center;
    }
</style>